<template>
  <!-- 一般情況下，class类名应与组件名匹配(建议，不强制要求)
         组件名：Person.vue   class类:  person
  组件名: MyTag.vue    class类:  my-tag-->
  <div class="person">
    <img :src="avatar" width="100px" />
    <span>{{ name }}</span>
    <i class="el-icon-circle-close" @click="doClick"></i>
  </div>
</template>

<script>
export default {
  props: {
    avatar: {
      // 声明属性，指定需要显示的头像路径
      type: String,
      default: "",
    },
    name: {
      // 声明属性，指定需要显示的昵称
      type: String,
      default: "默认昵称",
    },
  },
  methods: {
    // 监听删除图标被点击
    doClick(){
      // 在此发现用户点击了删除图标
      // 需要立即通知父组件,自定义事件：delete被触发
      // $emit()方法用于通知父组件自定义数据被触发
      // 参数delete就是自定义事件的类型名称
      // 在父组件中，就可以通过<div @delete=''></div> 监听该事件
      this.$emit('delete')
    }
  }
};
</script>

<style lang="scss" scoped>
.person {
  margin: 5px;
  display: inline-block;
  width: 110px;
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
  position: relative;
  span {
    display: inline-block;
    width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  i{
    position: absolute;
    display: none;
    top: -10px;
    right: -10px;
    background: #fff;
    font-size: 20px;
    color:red;
  }
  
}
.person:hover i{
    display: block;
  }
</style>